<script setup lang='ts' name="admin-role-add">
import type { FormInstance, FormRules } from 'element-plus'

import { createTemplates, getMessageGroups, putTemplates } from '@fl/api/ums-api'
import { CreateUUID } from '@fl/components/uuid'
import { ElCard, ElMessage } from 'element-plus'
import { cloneDeep } from 'lodash-es'
import { nextTick, reactive, ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'

const router = useRouter()
const route = useRoute()
const form = ref({ data_status: false, group_id: '', scene: '', template_code: '', template_content: '', template_name: '' })
const formData = ref<any>()
const formDataClone = ref<any>()
formData.value = route.query.data ? JSON.parse(route.query.data as any) : {}
formDataClone.value = route.query.dataGroup ? JSON.parse(route.query.dataGroup as any) : {}
const rules = reactive<FormRules<any>>({
    group_id: [
        {
            message: '请选择消息主题',
            required: true,
            trigger: 'change',
        },
    ],
    scene: [
        {
            message: '请选择消息分类',
            required: true,
            trigger: 'change',
        },
    ],
    template_code: [
        { message: '不能为空', required: true, trigger: 'blur' },
    ],
    template_content: [
        { message: '不能为空', required: true, trigger: 'blur' },
    ],
    template_name: [
        { message: '不能为空', required: true, trigger: 'blur' },
    ],
})
const title = ref('新增')
const formRef = ref()
const refundSwitch = ref(false)

const themeOption = [
    {

        label: '好房',
        value: 'HAOFANG',
    },
    {
        label: '保障房',
        value: 'BAOZHANGFANG',
    },
    {
        label: '政策',
        value: 'ZHENGCE',
    },
    {
        label: '登录',
        value: 'DENGLU',
    },
]
const sortOption = ref<any>([])

function refundSwitchGet() {
    if (JSON.stringify(formData.value) === '{}') {
        refundSwitch.value = false
    }
    else {
        if (formData.value.data_status === 0)
            refundSwitch.value = true

        else
            refundSwitch.value = false
    }
    console.log(refundSwitch.value, 'refundSwitch.value')
}
refundSwitchGet()
async function doSave(formEl: FormInstance | undefined) {
    if (!formEl)
        return
    await formEl.validate((valid, fields) => {
        const template_id = formData.value.template_id as any
        const codeTemp = {
            channel: ' PMSG',
            // template_code: CreateUUID(),
        }
        const forms = Object.assign(form.value, codeTemp)

        if (valid) {
            if (JSON.stringify(formData.value) === '{}') {
                createTemplates(forms).then((res: any) => {
                    console.log(res)
                    close()
                })
            }
            else {
                putTemplates(template_id, forms).then((res: any) => {
                    console.log(res)
                    close()
                })
            }
        }
        else {
            ElMessage.error('输入不能为空')

            console.log('error submit!', fields)
        }
    })
}

async function init() {
    await nextTick()
    if (JSON.stringify(formData.value) === '{}') {
        title.value = '新建'
        form.value = { data_status: false, group_id: '', scene: '', template_code: '', template_content: '', template_name: '' }
        console.log(form.value, '新建的form.value')
    }
    else {
        title.value = '编辑'
        form.value = formData.value
        form.value.group_id = formDataClone.value.id
        console.log(form.value, '编辑的form.value')
    }
}
init()
defineExpose({
    init,
})
function close() {
    router.push('/marketing-promotion/message-center-service/message-template/system-message')
}
function getMessageGroupsData() {
    const option = {
        channel: ' PMSG',
    }
    getMessageGroups(option).then((res) => {
        console.log(res, 'getMessageGroupsres')
        let sortOptionObj = {}
        res.forEach((item: any) => {
            sortOptionObj = {
                label: item.group_name,
                value: item.id,
            }
            sortOption.value.push(sortOptionObj)
        })
    })
}
getMessageGroupsData()
</script>

<template>
    <ElCard style="height:100vh">
        <div text-center>
            <el-form ref="formRef"
                     :model="form"
                     label-width="auto"
                     :rules="rules"
                     style="max-width: 500px;margin:auto"
            >
                <el-form-item label="消息名称"
                              prop="template_name"
                >
                    <el-input v-model="form.template_name" />
                </el-form-item>

                <el-form-item label="消息主题"
                              prop="scene"
                >
                    <el-select v-model="form.scene">
                        <el-option v-for="item in themeOption"
                                   :key="item.value"
                                   :value="item.value"
                                   :label="item.label"
                        />
                    </el-select>
                </el-form-item>

                <el-form-item label="消息分类"
                              prop="group_id"
                >
                    <el-select v-model="form.group_id">
                        <el-option v-for="item in sortOption"
                                   :key="item.value"
                                   :value="item.value"
                                   :label="item.label"
                        />
                    </el-select>
                </el-form-item>

                <el-form-item label="模板编码">
                    <el-input v-model="form.template_code" />
                </el-form-item>

                <el-form-item label="启用">
                    <el-switch v-model="refundSwitch" />
                </el-form-item>

                <el-form-item label="消息内容"
                              prop="template_content"
                >
                    <el-input v-model="form.template_content"
                              type="textarea"
                    />
                </el-form-item>

                <el-form-item flex
                              flex-col
                >
                    <el-button @click="close">
                        取消
                    </el-button>

                    <el-button type="primary"
                               @click="doSave(formRef)"
                    >
                        提交
                    </el-button>
                </el-form-item>
            </el-form>
        </div>
    </ElCard>
</template>

<style lang="scss" scoped>
:deep(.el-form-item__content) {
    margin: auto;
}
</style>
